<template>
	<view class="container">
		<view class="more" @click="$util.redirectTo('/promotionpages/live/list/list')">
			<image :src="$util.img(liveInfo.cover_img)" mode=""></image>
			<text>更多直播</text>
			<text class="iconfont iconright"></text>
		</view>
		
		<view class="anchor-info">
			<text>@{{ liveInfo.anchor_name }}</text>
		</view>
		
		<block v-if="liveInfo.goods.length">
			<swiper :autoplay="true" :interval="3000" :duration="1000" class="cart-swiper" :vertical="true" :circular="true">
				<swiper-item v-for="(goodsItem, goodsIndex) in liveInfo.goods" :key="goodsIndex">
					<view class="swiper-item">
						<view class="goods-img">
							<image :src="$util.img(goodsItem.cover_img)" mode=""></image>
						</view>
						<view class="goods-info">
							<view class="goods-name">{{ goodsItem.name }}</view>
							<view class="goods-price">¥{{ goodsItem.price }}</view>
						</view>
						<!-- <navigator :url="'/' + goodsItem.url" class="buy-btn">立即购买</navigator> -->
						<text class="buy-btn" @click="redirectTo(goodsItem.url)">立即购买</text>
					</view>
				</swiper-item>
			</swiper>
		</block>
		
		<view class="operation-wrap">
			<view class="item" @click="$util.redirectTo('/pages/index/index/index', {}, 'tabbar')">
				<view class="iconfont iconhome_fill_light"></view>
				<text>首页</text>
			</view>
			<view class="item">
				<button open-type="share" class="share-btn"></button>
				<view class="iconfont iconforwardfill"></view>
				<text>分享</text>
			</view>
			<view class="item" @click="$util.redirectTo('/pages/goods/cart/cart', {}, 'tabbar')">
				<view class="iconfont iconcartfill"></view>
				<text>购物车</text>
			</view>
		</view>
		
		<swiper autoplay="false" vertical="true" interval="990000" class="swiper" @change="changeVideo" :current="index">
			<swiper-item v-for="(item, index) in liveInfo.play_backs" :key="index">
				<video :src="$util.img(item.media_url)" 
					class="video"
					object-fit="cover"
					:autoplay="index == 0"
					play-btn-position="center"
					:controls="false"
					:enable-play-gesture="true"
					:enable-progress-gesture="true"
					:auto-pause-if-navigate="true"
					:id="'video' + index"
					@ended="videoEnded(index)"></video>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import http from 'common/js/http.js';
	
	export default {
		mixins: [http],
		data() {
			return {
				index: 0,
				id: 0,
				liveInfo: {
					play_backs: []
				},
				uid: 0
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.getLiveInfo();
			this.getUserId();
			
			if (option.source_uid) uni.setStorageSync('source_uid', option.source_uid);
		},
		methods: {
			changeVideo(e){
				this.index = e.detail.current;
				let video = uni.createVideoContext('video' + this.index);
				video.play()
			},
			getLiveInfo(){
				this.sendRequest({
					url: 'NsWxappLive.Room.roomInfo',
					data: {
						room_id: this.id
					},
					success: res => {
						if (res.code == 0 && res.data) {
							this.liveInfo = res.data;
						} else {
							this.$util.showToast({
								title: '未获取到直播间数据!！',
								success: () => {
									setTimeout(() => {
										this.$util.redirectTo('/promotionpages/live/list/list', {}, 'redirectTo');
									}, 1500)
								}
							});
						}
					}
				})
			},
			/**
			 * 获取当前用户id
			 */
			getUserId() {
				if (uni.getStorageSync('token')) {
					this.sendRequest({
						url: 'System.Member.getUserId',
						success: res => {
							if (res.data) this.uid = res.data;
						}
					})
				}
			},
			/**
			 * 一段视频播放结束
			 * @param {Object} index
			 */
			videoEnded(index){
				var next = index + 1; 
				if (next < this.liveInfo.play_backs.length) {
					this.index = next;
					let video = uni.createVideoContext('video' + next);
					video.play()
				}
			},
			redirectTo(url){
				url = url.replace('.html', '');
				this.$util.redirectTo('/'+ url, {}, 'redirectTo');
			}
		},
		/**
		 * 自定义分享内容
		 * @param {Object} res
		 */
		onShareAppMessage(res) {
			var path = '/promotionpages/live/playback/playback?id=' + this.id;
			if (this.uid) path += '&source_uid=' + this.uid;
			return {
				title: '好友邀请你一起看直播',
				imageUrl: this.liveInfo.share_img,
				path: path,
				success: res => {
					this.sendRequest({
						url: 'NsMemberShare.MemberShare.shareReward'
					})
				},
				fail: res => {}
			};
		}
	}
</script>

<style lang="scss">
@import "../public/css/backplay.scss"
</style>
